<template>
	<view class="content">
		<view class="content-top">
			<view class='cell-group'>
				<view class='cell-item user-head'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>头像</view>
					</view>
					<view class='cell-item-ft'>
						<u-upload ref="upload" :custom-btn="true" :max-count="1" :action="action" :show-progress="false">
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
							</view>
						</u-upload>
					</view>
				</view>
				<view class='cell-item'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>昵称</view>
					</view>
					<view class='cell-item-bd'>
						<p class='cell-bd-input'>{{user.nickname}}</p>
					</view>
				</view>
				<view class='cell-item'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>我的邀请码</view>
					</view>
					<view class='cell-item-bd'>
						<p class='cell-bd-input'>{{user.invite_code}}</p>
					</view>
				</view>
				<view class='cell-item' @click="juphone">
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>手机号码</view>
					</view>
					<view class='cell-item-bd'>
						<p class='cell-bd-input'>{{user.mobile}}</p>
					</view>
				</view>
				<view class='cell-item' @click="backpassword">
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>修改密码</view>
					</view>
					<view class='cell-item-bd'>
						<image class='cell-bd-input' src="../../static/next2.png"></image>
					</view>
				</view>
				<view class="cell-item" @click="sign">
					<p>退出登录</p>
				</view>
			</view>
		</view>
		<view class="button-bottom">
			<button class="btn btn-square btn-b" hover-class="btn-hover2" @click="submitHandler()"
				:disabled='submitStatus' :loading='submitStatus'>保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"",
				submitStatus: false,
				user:{},
				action: "http://shedehui.club/api/Upload/image",
				avatar:""
			}
		},
		onLoad(){
			var _this = this;
			_this.$api.userInfo().then(res=>{
				_this.user=res.data.data
			})
		},
		onShow() {
			var _this = this;
			_this.$api.userInfo().then(res=>{
				_this.user=res.data.data
			})
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 保存资料
			submitHandler() {
				let _this=this
				let avatarss=_this.$refs.upload.lists[0].response.data.file_url
				_this.submitStatus = true;
				_this.$api.modifyUser({avatar:avatarss}).then(res=>{
					_this.submitStatus = false;
					_this.$api.userInfo().then(res=>{
						_this.user=res.data.data
						_this.fileList[0].url=res.data.data.avatar
					})
				})
			},
			backpassword(){
				uni.navigateTo({
					url:"./modify/password"
				})
			},
			juphone(){
				uni.navigateTo({
					url:"./modify/phone"
				})
			},
			sign(){
				let _this=this
				uni.removeStorage({
				    key: 'userToken',
				    success: function (res) {
				        _this.initData()
				    }
				});
			},
			initData(){
				if(this.$db.get('userToken')){
					return
				}else{
					this.$db.userToken()
				}
			}
		}
	}
</script>

<style lang="less">
	.user-head {
		height: 100px;
	}

	.user-head-img {
		height: 90px;
		width: 90px;
		border-radius: 50%;
	}

	.cell-hd-title {
		color: #333;
	}

	.cell-item-bd {
		color: #666;
		font-size: 26px;
		image{
			float: right;
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>
